import React from 'react';
import { connect } from 'dva';
import moment from 'moment';
import {soilRestorationDataModel,theTotalQuantity,getTime} from '../../services/cockpit';
import style from'./indexPage.less';
import QueueAnim from 'rc-queue-anim';
import { Select,Divider } from 'antd';
import MyRadar from "./myChart/myRadar";
import MyBarL from "./myChart/myBarL";
import MyLineL from "./myChart/myLineL";

import MyBarC from './myChart/myBarC';
import MySurface from './myChart/mySurface';

import MyBarR from "./myChart/myBarR";
import MyPie from "./myChart/myPie";
import MyLineR from "./myChart/myLineR";

import MyTable from './myTable/myTable';

import Circle from './Circle';
const Option = Select.Option;
const more = require('../../assets/iconFont/more.png');
const chart = require('../../assets/iconFont/chart.png');
const clock = require('../../assets/iconFont/clock.png');
const flame = require('../../assets/iconFont/flame.png');
const farmland = require('../../assets/iconFont/farmland.png');
const repair = require('../../assets/iconFont/repair.png');
const safe = require('../../assets/iconFont/safe.png');
const molecule = require('../../assets/iconFont/molecule.png');

const boxL = [
    {
        icon:chart,
        name:'环保排放指标统计数据',
        module:<MyRadar />
    },
    {
        icon:clock,
        name:'环保排放指标实时数据',
        module:<MyBarL />
    },
    {
        icon:flame,
        name:'能源消耗量统计',
        module:<MyLineL />
    },
];
const boxR = [
    {
        icon:repair,
        name:'土壤日修复量',
        module:<MyLineR />
    },
    {
        icon:safe,
        name:'运行安全实时监控',
        module:<MyPie />
    },
    {
        icon:molecule,
        name:'土壤修复前后重点污染组分含量对标',
        module:<MyBarR />
    },
];

let circleData = [
   
    {
        now: 10,
        max: 85,
        title: '【项目工期】',
        sum:'',
        unit:'',
    },
    {
        now: 10,
        max: 58,
        title: '【总工程量】',
        sum:'',
        unit:'',
    },
    {
        now: 100,
        max: 100,
        title: '【土壤一次处理合格率】',
        sum:'',
        unit:'',
    },
    {
        now: 100,
        max: 100,
        title: '【环保排放达标率】',
        sum:'',
        unit:'',
    },
    ];

let tableData = {
    title:['污染物种类','浓度（mg/kg）','修复目标（mg/kg）'],
    data:[
        {name:'苯并(a)芘',span1:'',span2:''},
        {name:'二苯并（a,h）蒽',span1:'',span2:''},
        {name:'α-六六六',span1:'',span2:''},
        {name:'β-六六六',span1:'',span2:''},
        {name:'三氯乙烯',span1:'',span2:''},
        {name:'六氯苯',span1:'',span2:''},
    ]
};
let tableData2 = {
    title:['数据类型','回转窑温度','停留时间'],
    data:[
        {name:'最佳工艺组合(模型)',span1:'430℃',span2:'42分钟'},
        {name:'实时数据',span1:'412℃',span2:'39分钟'},
    ]
};

let videoList = {
    videoL:[
        {videoName:'项目现场一',url:''},
        {videoName:'项目现场二',url:''},
        {videoName:'项目现场三',url:''},
    ],
    videoC:[
        {videoName:'项目现场一',url:''},
        {videoName:'项目现场二',url:''},
    ],
    videoR:[
        {videoName:'项目现场一',url:''},
        {videoName:'项目现场二',url:''},
        {videoName:'项目现场三',url:''},
    ],
};
class IndexPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            time: Date.now(),
            viewType:true,
            waterContent:'0',
            waterContentType:true,
            show: true,
            show1:false,
            mian1:'',
            mian2:'',
            flag:true
        };
    }

    componentDidMount() {
        this.timeId = setInterval(() => {
            this.setState({
                time: Date.now(),
            })
        }, 1000);

        theTotalQuantity().then(data =>{
            let max = data.data.ret.gross;
            let now = data.data.ret.sum;
            circleData[1].max = max;
            circleData[1].now = now;
            circleData[1].sum = max;
            circleData[1].unit = 'm³';
        });
        getTime().then(data =>{
            let max = data.data.ret.atPresent;
            let now = data.data.ret.theNumberOfDays;
          
            circleData[0].max = max;
            circleData[0].now = now;
            circleData[0].sum = max;
            circleData[0].unit = '天';
        });

        soilRestorationDataModel().then(data =>{
            let name = data.data.ret.name;
            let amounts = data.data.ret.amounts;
            let target = data.data.ret.target;
            for(let i = 0; i < 6; i++){
                tableData.data[i].name = name[i];
                tableData.data[i].span1 = amounts[i];
                tableData.data[i].span2 = target[i];
            }
        })
    }
    componentWillUnmount() {
        clearTimeout(this.timeId)
    }
    //input框 土壤含水量的值
    setWaterContent = () =>{
        this.setState({
            waterContentType:false
        });
    };
    changeWaterContent=(e)=>{
        this.setState({
            waterContent:e.target.value,
        });
    };
    getWaterContent = (e) => {
        this.setState({
            waterContent:e.target.value,
            waterContentType:true
        });
    };
    //返回系统
    getStyem = () => {
        this.props.history.push("/controlSubject/ReportingSystem")
    }
    //图片点击事件
    goStytem = (index) => {
        console.log(index)
        if(index.name == '环保排放指标统计数据' || index.name == '环保排放指标实时数据'){
            this.props.history.push("/controlSubject/EnvironmentalHistory")
        }
        if(index.name == '能源消耗量统计') {
            this.props.history.push("/controlSubject/CheckingSystem")
        }
        if(index.name == '运行安全实时监控') {
            this.props.history.push("/controlSubject/AlarmManagement")
        }
        if(index.name == '土壤修复前后重点污染组分含量对标') {
            let data = {text:'土壤修复指标汇总表'};
            let path = {
            pathname:'/controlSubject/ReportingSystem',
            state:data,
            }
            this.props.history.push(path)
        }
    }
    //切换视图
    boxBtn = () =>{
        let noeView = !this.state.viewType;
        this.setState({
            viewType: noeView,
        })
    };
    //更多
    anMore = (e) => {
        console.log(e)
        // var fso = window.ActiveXObject;
        // console.log(window.ActiveXObject)
        // window.location.href="myprotocol://"

            // window.location.href="/hh-management-web/gnhj/exedownload/fileDownload"
            if(e == 'open') {
                window.location.href="myprotocol://"
            }

            if(e == 'down') {
                window.location.href="/hh-management-web/gnhj/exedownload/fileDownload"
            }
     

    }
    anMore1 = () => {

   
   
        this.setState({
            show1: !this.state.show1,
        });

          setTimeout(() => {
                this.setState({
                    show: !this.state.show,
                })
          },500)

}
    render() {
        return (
            <div className={style.indexBg}>
                <div className={style.bgBox}>
                <div className={style.getStyem} >
                <span style={{float:"right",marginRight:"5",cursor:"pointer"}} onClick={this.getStyem}>进入系统</span>
                <span style={{float:"right",marginRight:"5",cursor:"pointer"}} onClick={this.anMore.bind(this,'open')}>打开VR <Divider type="vertical" className={style.divder}/></span>                            
                <span style={{float:"right",cursor:"pointer",marginLeft:'10'}} onClick={this.anMore.bind(this,'down')}>下载VR <Divider type="vertical" className={style.divder}/></span>

                </div>
                    <div className={`${style.boxBig} ${style.boxL}`}>
                   
                        {this.state.viewType?
                            boxL.map((index,key)=>{
                                return(
                                    <div className={style.boxSmall} key={String(key)}>
                                        <div className={style.boxTitle}>
                                            <i><img className={style.iconImg} src={index.icon}/></i>
                                            {index.name}
                                            <i><img className={style.moreImg} src={more} onClick={this.goStytem.bind(this,index)}/></i>
                                        </div>
                                        {index.module}
                                    </div>
                                )
                            }):
                            videoList.videoL.map((index,key)=>{
                                return(
                                    <div className={style.boxSmall} key={String(key)}>
                                        <div className={style.boxTitle}>
                                            {index.videoName}
                                        </div>
                                        <div className={style.videoBoxSmall}>
                                            {index.url}
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className={style.boxC}>
                        <div className={style.timeBar}>{moment().format('YYYY年MM月DD日 HH: mm: ss')}</div>
                        <div className={style.btnBox}>
                            <span className={this.state.viewType?`${style.boxBtn} ${style.onBtn}`:`${style.boxBtn} ${style.offBtn}`} onClick={this.boxBtn} 
                            style={{color:'#5BCBF2',fontSize:'large',fontWeight:'bold'}}
                            >总览视图</span>
                            <span className={this.state.viewType?`${style.boxBtn} ${style.offBtn}`:`${style.boxBtn} ${style.onBtn}`} onClick={this.boxBtn}
                            style={{color:'#5BCBF2',fontSize:'large',fontWeight:'bold'}}
                            >视频视图</span>
                        </div>
                        {this.state.viewType?
                        <div>
                            <div className={style.diskBox}>
                                {
                                    circleData.map((index,key)=>{
                                        return(
                                            <div className={style.diskCircle} key={String(key)}>
                                                <Circle data={index}/>
                                                <i className={style.diskLine} ></i>
                                                <div className={style.circleName}>{index.title}<span style={{color:'#fff'}}>{index.sum}</span>{index.unit}</div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                            <QueueAnim className="demo-content"
                                key="demo"
                                type={['right', 'left']}
                                ease={['easeOutQuart', 'easeInOutQuart']}>
                                {this.state.show ? [
                            <div key="a">
                                <div className={style.boxTitle} key="b">
                                    <i><img className={style.iconImg} src={farmland}/></i>
                                    土壤修复大数据模型
                                    
                                    <i><img className={style.moreImg} src={more} /></i>
                                    {/* <span style={{float:"right",cursor:"pointer"}} onClick={this.anMore}>打开</span>  */}
                                  
                                  
                                
                               
                                    
                                </div>
                                <div className={style.tablesBox} key="c">
                                    <MyBarC />
                                    <MyTable dataValue={tableData}/>
                                    <div className={style.tableBtn}>
                                        <span>土壤含水量&nbsp;&nbsp;
                                            {this.state.waterContentType?<i onClick={this.setWaterContent}>{this.state.waterContent}</i>:<input value={this.state.waterContent} style={{width:'50px'}} onChange={this.changeWaterContent} onBlur={this.getWaterContent}/>}%
                                        </span>
                                        <div>大数据模型分析</div>
                                    </div>
                                </div>
                                <div className={style.tablesBox}>
                                    <MySurface />
                                    <div style={{marginTop:'60px'}}><MyTable dataValue={tableData2}/></div>
                                </div>
                            </div>
                            ] : null}
                            </QueueAnim>



                            


                        </div>:
                        videoList.videoC.map((index,key)=>{
                            return(
                                <div className={style.videoBox} key={String(key)}>
                                    <div className={style.boxTitle}>
                                        {index.videoName}
                                    </div>
                                    <div className={style.videoBoxBig}>
                                        {index.url}
                                    </div>
                                </div>
                            )
                        })
                        }
                    </div>
                    <div className={`${style.boxBig} ${style.boxR}`}>
                        {this.state.viewType?
                            boxR.map((index,key)=>{
                                return(
                                    <div className={style.boxSmall} key={String(key)}>
                                        <div className={style.boxTitle}>
                                            <i><img className={style.iconImg} src={index.icon}/></i>
                                            {index.name}
                                            <i><img className={style.moreImg} src={more} onClick={this.goStytem.bind(this,index)}/></i>
                                        </div>
                                        {index.module}
                                    </div>
                                )
                            }):
                            videoList.videoR.map((index,key)=>{
                                return(
                                    <div className={style.boxSmall} key={String(key)}>
                                        <div className={style.boxTitle}>
                                            {index.videoName}
                                        </div>
                                        <div className={style.videoBoxSmall}>
                                            {index.url}
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default IndexPage
